<!-- 表格中的文本显示组件：文本、数字、时间等非编辑状态下为文本的单元格，都可使用该组件渲染样式 -->
<template>
    <div class="table-cell" :title="columnConfig.ellipsis ? text : ''" :style="cellStyle">
        <!-- icon -->
        <img v-if="iconType === 'CUSTOM'" :src="icon" alt="" />
        <component v-else-if="iconType === 'DEFAULT'" :is="icon" />

        <!-- 文字 -->
        {{ text }}
    </div>
</template>

<script>
    import { computed, defineComponent } from 'vue'
    export default defineComponent({
        props: {
            text: {
                type: String,
                default: () => {
                    return ''
                }
            },
            color: {
                type: String,
                default: () => {
                    return ''
                }
            },
            iconType: {
                type: String,
                default: () => {
                    return ''
                }
            },
            icon: {
                type: String,
                default: () => {
                    return ''
                }
            },
            columnConfig: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        setup(props) {
            // 单元格的样式
            const cellStyle = computed(() => {
                const { align, ellipsis } = props.columnConfig

                const styleObject = {}

                if (props.color) {
                    styleObject['color'] = props.color
                }

                if (align) {
                    styleObject['text-align'] = align
                }

                if (ellipsis) {
                    styleObject['overflow'] = 'hidden'
                    styleObject['text-overflow'] = 'ellipsis'
                    if (
                        props.columnConfig.hasOwnProperty('width') &&
                        props.columnConfig.width !== null &&
                        props.columnConfig.width !== undefined
                    ) {
                        styleObject['width'] = props.columnConfig.width + 'px'
                    } else {
                        styleObject['width'] = '100%'
                    }
                }

                return styleObject
            })

            return {
                cellStyle
            }
        }
    })
</script>

<style lang="less" scoped>
    .table-cell {
        display: block;
        width: 100%;
    }
</style>
